<template>
  <div class="caring-report-print" :id="'caring-report-print-' + id">
    <div class="caring-report-print-item" style="font-size: 16px;" v-for="(i, index) in data" :key="index">
      <div style="padding: 30px 30px;">
        <div style="font-size: 18px;line-height: 2;text-align: center;font-weight: bold;letter-spacing: 5px;">中小型数据机房绿色低碳诊断报告书</div>
        <div style="margin-top: 50px;">
          <div>数据机房基础信息</div>
          <div>机房名称: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span></div>
          <div>机房地址: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span></div>
          <div>
            产权人名称: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>，
            产权人属性: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
          </div>
          <div>机房编号: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span></div>
          <div>机房面积: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>m²</div>
          <div>
            机房类型: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>，
            对应面积: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>m²
          </div>
        </div>

        <div style="margin-top: 50px;">
          <div>机房能耗信息</div>
          <div>能源消耗所在年份: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>*</div>
        </div>

        <div style="margin-top: 50px;">
          <div>电力消耗</div>
          <div>电表编号: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span></div>
          <div>电耗总量: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh（填写输入）*</div>
          <div style="display: flex;">
            <span>其中：</span>
            <div style="flex: 1;">
              <div>
                IT用能: 口无 口有
                <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh
                电表编号<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
              </div>
              <div>
                空调用能: 口无 口有
                <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh
                电表编号<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
              </div>
              <div>
                UPS用能: 口无 口有
                <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh
                电表编号<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
              </div>
              <div>
                其它用能: 口无 口有
                <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh
                电表编号<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-top: 50px;">
          <div>热力消耗: 口无 口有</div>
          <div>热表编号: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span></div>
          <div>口热计量消耗：<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>GJ</div>
          <div>口蒸汽热源：<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>t</div>
        </div>

        <div style="margin-top: 50px;">
          <div>用水消耗: 口无 口有</div>
          <div>水表编号: <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span></div>
          <div>水耗总量：<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>m³</div>
        </div>

        <div style="margin-top: 50px;">
          <div>当前机房的绿色低碳能效评估分级线:</div>
          <table style="border: solid 1px #333;border-collapse: collapse;width: 100%;text-align: center;margin-top: 10px;">
            <tr>
              <th style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">对应标准</th>
              <th style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">一级</th>
              <th style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">二级</th>
              <th style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">三级</th>
              <th style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">四级</th>
              <th style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">五级</th>
            </tr>
            <tr>
              <td style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">绿色数据机房</td>
              <td style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">≤1.2</td>
              <td style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">≤1.3</td>
              <td style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">≤1.4</td>
              <td style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">≤1.5</td>
              <td style="border: solid 1px #333;border-collapse: collapse;padding: 16px;">≤2</td>
            </tr>
          </table>
          <div style="font-size: 14px;margin-top: 10px;">备注:等级评估为PUE值。</div>
        </div>

        <div style="margin-top: 50px;padding-left: 30px;">
          <div>本机房年度耗能及PUE值</div>
          <div style="padding-left: 20px;">
            <div>PUE：总耗电/IT耗电=1.5</div>
            <div>
              年度电耗：
              <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh，
              <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kgce，
              单位面积电耗：
              <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kWh/m²，
              <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kgce，
            </div>
            <div>年碳排放量：<span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>kg</div>
          </div>
          <div style="margin-top: 20px;">
            本机房
            <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
            年度绿色低碳能效分级为：
            <span style="text-decoration: underline;">&nbsp;&nbsp;xxxx&nbsp;&nbsp;</span>
          </div>
        </div>

        <div style="margin-top: 50px;">
          <div>诊断建议：</div>
          <div>1、空调用能过高，室内温度超过设定值，建议对空调进行智能设置，降低空调使用频率;</div>
          <div>2、建议室内照明用电选用智能灯控，做到人来开灯，人走关灯，减少不科学照明用电;</div>
          <div>3、建议使用智能PDU，对IT服务器进行分台进行用能监测，了解IT细分的实时用能，调整不常用的服务器空耗的现象;</div>
        </div>

        <div style="margin-top: 100px;text-align: right;padding-right: 30px;">GDC绿能数据中心产业联盟</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'caring-report-print',
    props: {
      id: [String, Number],
      required: true
    },
    data() {
      return {
        // debug
        // data: [1],
        data: [],
      }
    },
    methods: {
      print(data) {
        console.log(data)
        this.preview(data, false, (newWin) => {
          const printCmd = newWin.document.execCommand('print')
          if (printCmd) {
            setTimeout(() => {
              this.data = []
              newWin.close()
            })
          }
        })
      },
      preview(data, buttonVisible = false, callback) {
        this.data = data
        this.$nextTick(() => {
          const dom = document.querySelector('#caring-report-print-' + this.id)
          const html = dom.innerHTML
          const newWin = window.open()
          newWin.document.write(
            '<style>' +
                'html, body { margin: 0; padding: 0; }' +
                '.caring-report-print-item { width: 230mm; margin: auto; }' +
                '@page { size: A4; margin: 3mm 0; }' +
                '@media print {' +
                  'html, body { width: 230mm; margin: 3mm 0; }' +
                  '.caring-report-print-item { page-break-after: always; }' +
                '}' +
            '</style>'
          )
          newWin.document.write(html)
          if (buttonVisible) {
            newWin.document.write(
                '<style>' +
                    'button { padding: 12px 15px; background-color: #409eff; border-radius: 4px; border: 0; color: #fff; font-size: 14px; cursor: pointer; position: fixed; right: 30px; top: 30px; }' +
                    '@media print { button { display: none; } }' +
                '</style>' + 
                '<button onclick="window.print()">打印</button>'
            )
          }
          if (typeof callback === 'function') {
            callback(newWin)
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .caring-report-print {
    // debug, 正式需放开
    display: none;
  }
</style>